<template>
	<view class="page-container">
		<!-- 使用伪元素创建固定背景 -->
		<view class="background-overlay"></view>

		<!-- 导航栏 -->
		<view class="nav-bar" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;">
			<view class="container">
				<u-tabs class="tabsStyle" :list="title" @click="click" :activeStyle="activeItemStyle"></u-tabs>
			</view>

			<view class="input_background">
				<text class="input_text iconfont">太原 &#xe602;</text>
				<text class="iconfont xe712">&#xe712;</text>
				<input class="input" v-model="searchText" placeholder="请输入搜索内容" @input="onInput" @blur="onBlur" />
				<text v-if="showClearButton" class="clear-button iconfont" @click="handleClear">&#xe60e;</text>
				<!-- 清除按钮 -->
				<view class="input_action">
					<view class="input_action_text" @click="handleSearch">搜索</view>
				</view>
			</view>
		</view>

		<!-- 页面内容容器 -->
		<view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
			<component :is="currentComponent"></component>
		</view>
	</view>
</template>

<script>
	import Recommend from './Component/RecommendComponent.vue'
	export default {
		data() {
			return {
				searchText: '', // 绑定搜索框的值
				showClearButton: false, // 控制清除按钮是否显示
				title: [{
						name: '推荐'
					},
					{
						name: '会员'
					}
				],
				activeItemStyle: {
					fontWeight: 'bold',
					color: '#000' // 可选：改变选中项的颜色
				},
				currentComponent: Recommend,
				navBarHeight: 44 // 导航栏高度
			};
		},
		methods: {
			onInput() {
				this.showClearButton = this.searchText.length > 0;
			},
			onBlur() {
				// 可以在这里处理失去焦点时的逻辑
			},
			handleSearch() {
				console.log('开始搜索:', this.searchText);
				// 在这里执行搜索逻辑，例如发起网络请求
			},
			handleClear() {
				this.searchText = ''; // 清空输入框
				this.showClearButton = false; // 隐藏清除按钮
				console.log('清空搜索框');
				// 清空搜索框后的其他逻辑，如果需要的话
			},
			click(item) {
				console.log('item', item);
			}
		}
	};
</script>

<style scoped>
	.page-container {
		position: relative;
		/* 确保伪元素相对于此容器定位 */
		min-height: 100vh;
		/* 确保页面最小高度 */
	}

	/* 使用伪元素创建固定背景 */
	.background-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #9fd7fc, #e4f4fb);
		background-color: #9fd7fc;
		/* 设置页面渐变背景 */
		z-index: -1;
		/* 确保它在所有内容之下 */
	}

	.nav-bar {
/* 		background: linear-gradient(to bottom, #9fd7fc, #e4f4fb); */
		background-color: #9fd7fc;
		/* 设置导航栏背景色为透明 */
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 999;
		width: 100%;
		/* 确保导航栏宽度占满整个屏幕 */
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		/* 垂直居中 */
		height: 100%;
		/* 导航栏内容垂直居中 */
	}

	.page-content {
		background-color: transparent;
		/* 保持页面内容背景透明 */
		min-height: calc(100vh - 44px);
		/* 减去导航栏高度 */
		padding-top: v-bind(navBarHeight + 'px');
		/* 动态设置padding-top以确保内容不被导航栏遮挡 */
		margin-top: 30rpx;
		overflow-y: auto;
		/* 确保内容可滚动 */
	}

	/* 如果需要更复杂的样式，可以通过自定义类来实现 */
	.u-tabs__item--active {
		font-weight: bold !important;
	}

	.input_background {
		display: flex;
		background-color: #ffffff;
		align-items: center;
		height: 80rpx;
		border-radius: 40rpx;
		margin-bottom: 10rpx;
		position: relative;
		width: 95%;
	}

	.input_text {
		margin-left: 20rpx;
	}

	.xe712 {
		margin-right: 20rpx;
	}

	.input {
		flex-grow: 1;
		background: transparent;
		color: #000000;
		border: none;
		outline: none;
		font-size: 25rpx;
	}

	.clear-button {
		position: absolute;
		right: 130rpx;
		color: #ccc;
		/* 更改为更合适的颜色 */
		cursor: pointer;
	}

	.input_action {
		height: 50rpx;
		display: flex;
		align-items: center;
		background-color: #3d70fd;
		border-radius: 30rpx;
		margin-right: 10rpx;
	}

	.input_action_text {
		margin: 0 30rpx;
	}
</style>